<template>
    <Header style="height: 200px;background: bisque">

        <Row>
            <Col span="4">
                <Card style="width:180px;height: 180px;margin: 10px 1px 10px 2px">
                    <div style="text-align:center">
                        <img src="http://img1.360buyimg.com/da/jfs/t1/15264/1/11653/343050/5c90a38aEdb3eb3a8/f0c3252484139946.gif?v=0.29449692434442865"/>
                    </div>
                </Card>
            </Col>
            <Col span="10">
                <Menu mode="horizontal" style="background:#D4DFE6;margin: 125px 1px 2px 100px ">
                    <MenuItem name="1">
                        <Icon type="ios-paper"/>
                        <span @click="indexNavig()">首页</span>
                    </MenuItem>
                    <MenuItem name="2">
                        <Icon type="ios-people"/>
                        <span @click="notebookNavig() ">数码</span>
                    </MenuItem>
                    <MenuItem name="4">
                        <Icon type="ios-construct"/>
                        <span @click="foodNavig() ">食品</span>
                    </MenuItem>
                </Menu>
            </Col>
            <Col span="6" offset="2">
                <Row>
                    <LoginAvatar style="margin: 10px 20px"/>
                </Row>
                <Row>
                    <PublicSearch in-size="large" style="width: 260px;height: 32px; margin: 100px 1px 2px 280px"/>
                </Row>
            </Col>
        </Row>
    </Header>
</template>

<script>
    import PublicSearch from "@/components/PublicSearch";
    import LoginAvatar from "@/app/pages/LoginAvatar";

    export default {
        name: "PublicHeader",
        components: {
            PublicSearch,
            LoginAvatar
        },
        methods: {
            indexNavig() {
                return this.$router.push({path: '/navigate/'})

            },
            notebookNavig() {
                return this.$router.push({path: '/navigate/notebook'})
            },
            foodNavig() {
                return this.$router.push({path: '/navigate/food'})

            }
        }
    };
</script>

<style scoped>

</style>
